<template>
  <div class="flex h-full">
    <a-card class="mr-2" :body-style="{ height: '100%', display: 'flex', flexDirection: 'column' }">
      <PatientList :selected-item="selectedItem" @select="selectPatient" />
    </a-card>
    <div class="flex flex-col flex-1 overflow-hidden">
      <PatientInfoHeader :patient-info="selectedItem" :showBadge="false" onlyShowBadge>
        <a-divider type="vertical" :style="{ height: '40px', margin: '0 16px' }" />
        <div>
          <div class="flex items-center">
            <LabelValue label="手术医生" :width="160" :value="selectedItem.aptmDoctorName" />
            <LabelValue label="手术房间" :width="200" :value="selectedItem.oprRoomName" />
            <LabelValue label="一助" :width="160" :value="selectedItem.fNurseName" />
            <LabelValue label="巡回护士" :width="160" :value="selectedItem.tourNurseName" />
            <LabelValue label="心电监护" :width="120" :value="typeFormat(selectedItem.isEcg)" />
            <LabelValue label="联合手术1" :width="160" :value="selectedItem.jointOprName1" />
            <LabelValue label="嘱托" :width="160" :value="selectedItem.advMemo" />
          </div>
          <div class="flex items-center">
            <LabelValue label="麻醉医生" :width="160" :value="selectedItem.anaesDoctorName" />
            <LabelValue label="麻醉方式" :width="200" :value="selectedItem.anaesName" />
            <LabelValue label="二助" :width="160" :value="selectedItem.sNurseName" />
            <LabelValue label="器械护士" :width="160" :value="selectedItem.instrumenttNurseName" />
            <LabelValue label="复发" :width="120" :value="typeFormat(selectedItem.isRecurrence)" />
            <LabelValue label="联合手术2" :width="160" :value="selectedItem.jointOprName2" />
            <LabelValue label="特殊要求" tooltip :width="200" :value="selectedItem.specRequirements" />
          </div>
        </div>
      </PatientInfoHeader>
      <div class="flex flex-1 mt-2 overflow-hidden">
        <a-card class="flex-1 overflow-hidden" :body-style="{ padding: '0 8px', height: '100%', overflow: 'hidden' }">
          <a-tabs v-model:activeKey="tabsKey" class="h-full" destroy-inactive-tab-pane @change="tabChange">
            <a-tab-pane :key="1" tab="检查"><a-empty /></a-tab-pane>
            <a-tab-pane :key="2" tab="检验"><a-empty /></a-tab-pane>
            <a-tab-pane :key="3" tab="术前准备">
              <PreOperate :patient-data="preOperativeData" :selected-item="selectedItem" />
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import PatientInfoHeader from '@/components/business/PatientInfoHeader'
import LabelValue from '@/components/LabelValue'
import { post } from '@/utils/request'
import PatientList from './components/PatientList'
import PreOperate from './pre-op'
import userStore from './store'

const store = userStore()
const tabsKey = ref(3)
const preOperativeData = ref({})
const selectedItem = ref({})

// 获取术前准备情况
const getPreoperativeData = async () => {
  const { code, data, msg } = await post('/oprOperation/opr/getPreoperationReadyInfo', { oprLsh: selectedItem.value.oprLsh })
  if (code !== 0) return message.error(msg)
  preOperativeData.value = data
}

const selectPatient = (patient) => {
  if (patient) {
    selectedItem.value = patient
    getPreoperativeData()
  } else {
    selectedItem.value = {}
    preOperativeData.value = {}
  }
}
const tabChange = (e) => {
  if (e === 3) {
    getPreoperativeData()
  }
}
const typeFormat = (type) => {
  // 0:未选中|1：已选中
  if (type === 0) {
    return '否'
  } else if (type === 1) {
    return '是'
  } else {
    return ''
  }
}
watch(
  () => store,
  (val) => {
    if (val.refreshDetail) {
      getPreoperativeData()
      store.refreshDetail = false
    }
  },
  {
    deep: true
  }
)
</script>
<style lang="less" scoped>
:deep(.ant-tabs-tab) {
  padding: 12px 24px;
}
.bg-color {
  background: var(--thin-color);
}
:deep(.ant-table-row-expand-icon) {
  display: none;
}
.classify-checkall {
  .ant-tag {
    font-size: 14px;
    line-height: 30px;
    padding-inline: 14px;
  }
}
</style>
